<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>远方之家</title>
    <style>
        a{
            text-decoration: none;
        }
        #zhuce{
            margin-left: 1000px;
        }
        #zhuce a{
            color: black;
            font-weight: 600;
            font-size: 12px;
        }

        #sousuokuang{
            float: right;
            margin-right: 850px;
            margin-top: 10px;

            display: inline-block;
            width: 220px;
            height: 10px;
            color: #841c1c;
            border-radius: 15%;
        }
        #sousuokuang #kuang{
            width:440px;
            height:40px;
            border-radius: 4%;
            border: 3px solid #27bfbf;
        }
        #sousuowenzi{
            float: right;
            margin-right: 530px;
            width: 50px;
            margin-top: -45px;
            font-size: 20px;

        }
        #diercen{
            height:1600px;
            margin-top: 10px;
            margin-left: 180px;
        }
        .no1{
            display: inline-block;
            color: #fff;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            background-color: #00d0d4;
            padding: 0 9px;
        }
        .xiangyou{
            display: inline-block;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent transparent #00d0d4;
            margin-left: -3px;
        }
        #dierge{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }

        #dierge a span{
            color: #616161;
        }
        #disange{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }

        #disange a span{
            color: #616161;
        }
        #disige{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }

        #disige a span{
            color: #616161;
        }
        #diwuge{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }

        #diwuge a span{
            color: #616161;
        }
        #diliuge{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }
        #diliuge a{

        }
        #diliuge a span{
            color: #616161;
        }
        #diqige{
            display: inline-block;
            font-weight: 400;
            font-size: 12px;
            line-height: 42px;
            padding: 0 10px;
        }

        #diqige a span{
            color: gold;
        }
        #erpai01{
            border: 3px solid #00d0d4;
            width:680px;
            height:320px;
            margin-left: 10px;

        }

        #diyilie{

            font-size: 18px;
            width: 81px;
            height: 320px;
            text-align: center;
            background-color: #00d0d4;
        }


         #yilie01,#yilie02,#yilie03,#yilie04,#yilie05,#yilie06,#yilie07 {
             background: #00d0d4 ;
             height: 45.7px;
             margin: auto auto;

         }

        /*#yilie01:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie02:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie03:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie04:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie05:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie06:hover{*/
        /*    background-color: red;*/
        /*}*/
        /*#yilie07:hover{*/
        /*     background-color: red;*/
        /*}*/

        #diyilie a{

            color: #1397dc;
            font-size: 20px;
            line-height: 48px;
        }

        #diyilie:visited{
            background-color: black;

        }
        #dierlie{

            margin-left:110px;
            margin-top: -310px;
            width: 540px;
            height: 300px;

        }
        #dierlie .diyige{
            width: 220px;
            font-size: 15px;

        }
        #dierlie a{
            color: #000;
            font-weight: initial;

        }

        #dierlie .diyige .xialiediyi{

            opacity: 0.6;
        }
        #dierlie .dierge {
            margin-top: -22px;
            margin-right: 20px;
            float: right;
            opacity: 0.6;
            font-size: 13px;
        }
        #dierlie .dierge a:hover{
              color: red;
            text-decoration: underline;
        }

        .disihang a span{

            font-size: 16px;
            color: #64bae7;
        }
        #wenzijipiao a{
            color: black;
        }

        #wenzijipiao a:hover{
            color: #00d0d4;
        }
        #wenzijiudian a{
            color: black;
        }

        #wenzijiudian a:hover{
            color: #00d0d4;
        }
        #jiudiantupian1{
            background: url("img/酒店1.jpg/");
            background-size: 220px 301px;
            width: 220px;
            height: 301px;
            background-repeat: no-repeat;
            float: left;
            margin-top: 16px;
            margin-left: 16px;
        }
        #jiudiantupian2{
            background: url("img/酒店2.jpg/");
            background-size: 220px 301px;
            width: 220px;
            height: 301px;
            background-repeat: no-repeat;
            float: left;
            margin-top: 16px;
            margin-left: 16px;
        }
        #jiudiantupian3{
            background: url("img/酒店3.jpg/");
            background-size: 220px 301px;
            width: 220px;
            height: 301px;
            background-repeat: no-repeat;
            float: left;
            margin-top: 16px;
            margin-left: 16px;
        }
        #jiudiantupian4{
            background: url("img/酒店4.jpg/");
            background-size: 220px 301px;
            width: 220px;
            height: 301px;
            background-repeat: no-repeat;
            float: left;
            margin-top: 16px;
            margin-left: 16px;
        }
        #jiudiantupian5{
            background: url("img/酒店5.jpg/");
            background-size: 220px 301px;
            width: 220px;
            height: 301px;
            background-repeat: no-repeat;
            float: left;
            margin-top: 16px;
            margin-left: 16px;
        }
        #dangqianjingdian a{
            color: black;
        }

        #dangqianjingdian a:hover{
            color: #00d0d4;
        }
        #jingdianwenzi a{

            color: black;
            opacity: 0.8;
        }
        #jingdianwenzi a:hover{
            color: #047bba;
        }

         .content{
             width: 464px;
             height: 320px;
             margin: 0px 0px;
             position: relative;
         }
        .imglist{
            padding-left: 0px;
            list-style: none;
            width: 464px;
            height: 320px;
            position: relative;
        }

        .item{
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            opacity: 1;
            transition: all 1s;
        }
        .item:nth-child(1){

            background-image: url("img/旅游1.jpg" );

            background-size: 464px 320px;
        }
        .item:nth-child(2){
            background-image: url("img/旅游2.jpg");
            background-size: 464px 320px;
        }

        .item:nth-child(3){
            background-image: url("img/旅游3.jpg");
            background-size: 464px 320px;
        }
        .item:nth-child(4){
            background-image: url("img/旅游4.jpg");
            background-size: 464px 320px;
        }
        .item:nth-child(5){
            background-image: url("img/旅游5.jpg");
            background-size: 464px 320px;
        }
        .item.active{
            opacity: 1;
            z-index: 10;
        }
        /*.imglist li:nth-child(1){*/
        /*    z-index: 1;*/
        /*}*/
        /*.imglist li img{*/
        /*    width: 590px;*/
        /*    height: 470px;*/

        /*}*/
        .btn{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 150px;
            z-index: 15;

            border-radius: 30%;
            visibility: hidden;

        }
        #goPre{
            left:0px;
        }
        #goNext{
            right:0PX
        }
        .pointlist{
            position: absolute;
            list-style: none;
            margin-left: 30px;
            left: 20px;
            bottom: 15px;
            z-index: 20;
        }

        .point{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.4);
            margin: 0px 4px 0px 0px;
            float: left;
            border: 2px solid transparent;
            background-clip: content-box;
            cursor: pointer;
        }

        .point.active{
            background-color: white;
            border: 2px solid rgba(255,255,255,0.4);
        }
        #disancen a{
            color: darkgrey;
        }



       </style>
</head>
<body>
        <table  width="1537px" cellpadding="0px" cellspacing="0px" style="margin-left: -8px;border: 0px; margin-top: 10px">

                <tr style="width: 1537px;">
                    <div id="diyicen">
                        <div id="zhuce"  style="font-size: 14px;">
                             <a href="#" >登录</a>&nbsp;或<a href="#">&nbsp;注册</a>
                            &nbsp;<a  href="#" >官方消息</a>
                            &nbsp;<a  href="#" >我的订单</a>
                             &nbsp;<a  href="#" >联系客服</a>
                        </div>

                        <div id="sousuo">

                            <img src="img/骆驼.png" height="60px" style="margin-top: 23px;margin-left: 160px; " >

                            <div id="sousuokuang">
                              &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="kuang" style=" outline-style:none; " placeholder="&nbsp;&nbsp;&nbsp;搜索目的地" >
                            </div>


                            <div id="sousuowenzi">
                                <a href="#"  style="color:#000;">搜索</a>
                            </div>
                            <div id="shijian" style="float: right;margin-right: 50px;margin-top: -30px;color: #ff9800;">

                            </div>
                        </div>

                        <tr height="50px" style="margin-left: -20px;margin-top: 80px" >
                            <td bgcolor="#00ced1"  >
                            &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;
                                <a href="#" >
                                    <font size="5" color="white" style="font-weight: bold">首页</font>
                                </a> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3" color="white" style="font-weight: bold">机票</font>
                                </a> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">酒店</font>
                                </a> &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">火车票</font>
                                </a>   &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">度假</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">团购</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">门票</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">当地人</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">汽车票</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">行程设计</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">攻略</font>
                                </a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                                <a href="#">
                                    <font size="3"  color="white" style="font-weight: bold">旅游快讯</font>
                                </a>
                            </td>
                        </tr>
                    </div>
                </tr>
        </table>
        <table>

                    <div id="diercen" >
                        <div id="diyipai" style="margin-left: 0px;border: none;">
                            <div class="no1">
                                境外直通车
                            </div>
                            <span class="xiangyou">

                            </span>
                            <div id="dierge">
                                <a href="#">
                                    <span>境外酒店</span>
                                </a>
                            </div>

                            <div id="disange">
                                <a href="#">
                                    <span>海外玩乐</span>
                                </a>
                            </div>

                            <div id="disige">
                                <a href="#">
                                    <span>出境游</span>
                                </a>
                            </div>

                            <div id="diwuge">
                                <a href="#">
                                    <span>海外购物</span>
                                </a>
                            </div>
                            <div id="diliuge">
                                <a href="#">
                                    <span>签证</span>
                                </a>
                            </div>
                            <div id="diqige">
                                <a href="#">
                                    <span>出境Wi-Fi</span>
                                </a>
                            </div>

                        </div>
                        <div id="dierpai" >
                            <div class="guanggaotu" style="float:right;margin-right: 150px;">
<!--                                <div class="guangaotu01">-->
<!--                                    <a href="#"><img src="img/广告.jpg"/></a>-->
<!--                                </div>-->
<!--                                <div class="guanggaowenzi"style="margin-top:-24.5px;">-->
<!--                                    <input type="text" value="广告" style="background-color: #616161; color:white;width: 50px;text-align:center;border: 0px;border-radius: 5px;">-->
<!--                                </div>-->


                                <div class="content" style="margin-top: -15px;">
                                    <ul class="imglist">
                                        <li class="item active"></li>
                                        <li class="item"></li>
                                        <li class="item"></li>
                                        <li class="item"></li>
                                        <li class="item"></li>
                                        <li class="item"></li>
                                    </ul>
                                    <button type="button" class="btn" id="goPre" ></button>
                                    <button type="button" class="btn" id="goNext"></button>

                                    <div class="pointlist">
                                        <li class="point active" data-index="0"><a href="#"/></li>
                                        <li class="point" data-index="1"></li>
                                        <li class="point" data-index="2"></li>
                                        <li class="point" data-index="3"></li>
                                        <li class="point" data-index="4"></li>
                                    </div>
                                </div>
                            </div>
                                <div id="erpai01">
                                    <div id="diyilie" >
                                        <div id="yilie01">

                                            <a href="#" class="yilie011">机票</a>
                                        </div>
                                        <div id="yilie02">
                                            <a href="#" >酒店</a>
                                        </div>
                                        <div id="yilie03">
                                            <a href="#" >火车票</a>
                                        </div>
                                        <div id="yilie04">
                                            <a href="#" >度假</a>
                                        </div>
                                        <div id="yilie05">
                                            <a href="#" >团购</a>
                                        </div>
                                        <div id="yilie06">
                                            <a href="#" >门票</a>
                                        </div>
                                        <div id="yilie07">
                                            <a href="#" >自由行</a>
                                        </div>
                                    </div>
                                    <div id="dierlie" class="diyihang" style="display: block;">
                                        <div id="diyihang" class="diyige">
                                            &nbsp;&nbsp;&nbsp;
                                            <a href="#">
                                                国内机票
                                            </a>&nbsp;&nbsp;&nbsp;
                                            <a href="#" class="xialiediyi">
                                                <i>国际 . 港澳台机票</i>
                                            </a>
                                        </div>
                                        <div class="dierge">
                                            <a href="#" class="xialiedier">出票状态查询</a>&nbsp;&nbsp;&nbsp;
                                            <a href="#" class="xialiedisan">退票改签</a>

                                        </div>
                                        <hr style="border: 0.5px solid #00d0d4; width:104%; size: 1px;background-color: #00d0d4;margin-left: -8px">
                                        <from>
                                            <input type="radio" name="sex" value="单程" checked="checked" style="margin-top: 15px;margin-left: 25px" />单程
                                            <input type="radio" name="sex" value="往返" />往返
                                        </from>
                                        <div class="chufafanhui">
                                            <div class="日期"  style="float: right;margin-top: -12px;" >
                                                <div class="chufa01"style=" width:224px; height:37px; margin-left: 16px;margin-top: 12px; border: 1px solid  darkgray;opacity: 0.6; border-radius: 5px" >
                                                    <div class="chufali02" style=" font-size:14px;left: 35px;padding-left: 10px;height: 35px;line-height:35px;display: block;float: right ">
                                                        <input type="text" name="kword" value=""  style="height: 20px; width: 185px;border: 0px;outline-style: none;">
                                                    </div>
                                                    <div class="chufali" style="font-size: 12px;line-height:27px; "  >
                                                        &nbsp;日期
                                                    </div>

                                                </div>
                                                <div class="chufa01"style=" width:224px; height:37px; margin-left: 16px;margin-top: 15px; border: 1px solid  darkgray;opacity: 0.6; border-radius: 5px" >
                                                    <div class="chufali02" style=" font-size:14px;left: 35px;padding-left: 10px;height: 35px;line-height:35px;display: block;float: right ">
                                                        <input type="text" name="kword"  style="height: 20px; width: 185px;border: 0px;outline-style: none;">
                                                    </div>
                                                    <div class="chufali" style="font-size: 12px;line-height:27px; "  >
                                                        &nbsp;日期
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chufa" >
                                                <div class="chufa01"style=" width:224px; height:37px; margin-left: 16px;margin-top: 20px; border: 1px solid  darkgray;opacity: 0.6; border-radius: 5px" >
                                                    <div class="chufali02" style=" font-size:14px;left: 35px;padding-left: 10px;height: 35px;line-height:35px;display: block;float: right ">
                                                       <input type="text" name="kword" value="输入国家/地区/城市/机场" onfocus="if(this.value=='输入国家/地区/城市/机场')this.value='';" onblur="if(this.value=='')this.value='输入国家/地区/城市/机场';"class="Smallput" style="height: 20px; width: 185px;border: 0px;outline-style: none;">
                                                    </div>
                                                    <div class="chufali" style="font-size: 12px;line-height:27px; "  >
                                                       &nbsp;出发
                                                    </div>

                                                </div>
                                                <div class="chufa01"style=" width:224px; height:37px; margin-left: 16px;margin-top: 15px; border: 1px solid  darkgray;opacity: 0.6; border-radius: 5px" >
                                                    <div class="chufali02" style=" font-size:14px;left: 35px;padding-left: 10px;height: 35px;line-height:35px;display: block;float: right ">
                                                        <input type="text" name="kword" value="输入国家/地区/城市/机场" onfocus="if(this.value=='输入国家/地区/城市/机场')this.value='';" onblur="if(this.value=='')this.value='输入国家/地区/城市/机场';"class="Smallput" style="height: 20px; width: 185px;border: 0px;outline-style: none;">
                                                    </div>
                                                    <div class="chufali" style="font-size: 12px;line-height:27px; "  >
                                                        &nbsp;到达
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="disanhang">

                                            <a href="#" >
                                                <div class="lijisousuo" style="color: white;margin-right:30px;line-height:50px;margin-top:-10px;background-color:#ff9800;border-radius: 5px;float:right;width: 150px;height: 45px;font-weight: 500;text-align: center;">
                                                    立即搜索
                                                </div>
                                            </a>

                                            <div class="guanggaowenzi" style="width:200px;opacity: 0.6;margin-top: 30px;margin-left: 30px;">
                                                <a style="font-size: 13px;">  可实时搜索 </a>
                                                <a  style="font-size: 16px;">   28万 </a>
                                                <a style="font-size: 13px;"> 条国际航线  </a>
                                            </div>
                                        </div><br><br>
                                        <div class="disihang"  >&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="#"><span>
                                                全程预定保障.去哪儿都放心</span>
                                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="#"><span>正规商家</span></a>&nbsp;&nbsp;&nbsp;
                                            <a href="#"><span>支付安全</span></a>&nbsp;&nbsp;&nbsp;
                                            <a href="#"><span>售后无忧</span></a>
                                        </div>
                                    </div>
                                </div>
                            <div id="jipiao" style="width: 1200px;height: 600px;">
                                <div id="wenzijipiao" style=" height: 50px;width: 1100px;">
                                    <a href="#" style="margin-left: 30px;margin-top: 50px;font-size:15px;line-height: 80px">国内低价机票</a>
                                    <a href="#" style="font-size:17px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国际 . 港澳台低级航线（单程）</a>
                                    <a href="#" style="font-size:15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国际 . 港澳台低级往返（单程）</a>
                                    <a href="#" style="font-size:13px;float: right; opacity: 0.7;margin-top: 38px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多低价机票</a>
                                </div>
                                <hr style="border: 0.5px solid #00d0d4; width:1200px; size: 1px;background-color: #00d0d4;margin-left:0px">

                                <div id="jipiaojiage" >
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px;  margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 北京</a>
                                      <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>600</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>

                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 上海</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>480</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 广州</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>380</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 深圳</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>420</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px;margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 厦门</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>450</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px;margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 南京</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>520</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px;margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 杭州</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>430</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 苏州</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>550</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 珠海</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>460</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                    <div class="wangfan" style="width:217px;height: 110px;background-color: beige;border-radius:5px; margin:10px;float:left;">
                                        <br><a href="#" style="margin-left: 20px;color:#000;">南昌 <img src="img/向右.jpg" style=" width:15px;height:15px;"/> 东莞</a>
                                        <br> <a href="#" style="opacity: 0.6;margin-left: 12px;font-size: 12px;">3月15日至3月16日</a>
                                        <br><a href="#" style="font-size: 22px;margin-left: 26px;line-height: 45px;color:red;"><img src="img/人名币.png" style=" width:20px;height:20px;"/>400</a>
                                        <a href="#" >
                                            <div class="liqiang" style="color: white;margin-right:25px;line-height:28px;margin-top:11px;background-color:#ff9800;border-radius: 5px;float:right;width: 60px;height: 28px;font-weight: 500;text-align: center;">
                                                立抢
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div id="wenzijiudian" style=" height: 50px;width: 1100px;">
                                    <a href="#" style="margin-left: 30px;margin-top: 50px;font-size:15px;line-height: 80px">国内酒店必住榜</a>
                                    <a href="#" style="font-size:17px;">&nbsp;&nbsp;&nbsp;&nbsp;国内酒店推荐</a>

                                    <a href="#" style="font-size:13px;float: right; opacity: 0.7;margin-top: 38px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多特惠酒店</a>
                                </div>
                                <hr style="border: 0.5px solid #00d0d4; width:1200px; size: 1px;background-color: #00d0d4;margin-left:0px">
                                <div id="jiudiantupian1" style="float:left;margin-left: 10px;">
                                    <a href="#" style="font-size: 20px;padding: 20px;line-height:60px;color: white">必住主题酒店榜单> </a><br>
                                    <a href="#" style="font-size: 14px;padding:22px;color: white;">主题酒店，享受绝佳体验</a>
                                </div>
                                <div id="jiudiantupian2" style="float:left;margin-left: 20px;">
                                    <a href="#" style="font-size: 20px;padding: 20px;line-height:60px;color: white">必住情侣酒店榜单> </a><br>
                                    <a href="#" style="font-size: 14px;padding:22px;color: white;">你与他/她的私人空间</a>
                                </div>
                                <div id="jiudiantupian3" style="float:left;margin-left: 20px;">
                                    <a href="#" style="font-size: 20px;padding: 20px;line-height:60px;color: white">必住商务酒店榜单> </a><br>
                                    <a href="#" style="font-size: 14px;padding:22px;color: white;">品质商旅，品味随行</a>
                                </div>
                                <div id="jiudiantupian4" style="float:left;margin-left: 20px;">
                                    <a href="#" style="font-size: 20px;padding: 20px;line-height:60px;color: white">必住民宿酒店榜单> </a><br>
                                    <a href="#" style="font-size: 16px;padding:22px;color: white;">住民宿，体验纯正城市风情</a>
                                </div>
                                <div id="jiudiantupian5" style="float:left;margin-left: 20px;">
                                    <a href="#" style="font-size: 20px;padding: 20px;line-height:60px;color: white">必住青旅酒店榜单> </a><br>
                                    <a href="#" style="font-size: 14px;padding:22px;color: white;">确认过眼神，是你的小确幸</a>
                                </div>
                                <br><br>
                                <div id="jingdian" >
                                    <div id="dangqianjingdian" style=" height: 50px;width: 1100px;">
                                        <a href="#" style="margin-left: 30px;margin-top: 50px;font-size:15px;line-height: 80px">当前景点</a>
                                        <a href="#" style="font-size:17px;">&nbsp;&nbsp;&nbsp;&nbsp;特惠景点</a>

                                        <a href="#" style="font-size:13px;float: right; opacity: 0.7;margin-top: 38px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多景点</a>
                                    </div>
                                    <hr style="border: 0.5px solid #00d0d4; width:1200px; size: 1px;background-color: #00d0d4;margin-left:0px">
                                    <div id="jingdianwenzi" style="float:left;margin-left: -10px;">
                                        <p style="font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江西十大热门景点</p>
                                        <div class="jingdianmingcheng" style="margin-left: 20px;float:left;">
                                            <a href="#"><li>婺源</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>明月山</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>龙虎山</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>九江民生大千世界游乐园</li></a>
                                            &nbsp;&nbsp;<a href="#"> <li>滕王阁</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>庐山</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>古窑民俗博览区</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>江西明月山天沐温泉</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>鄱阳湖国家湿地公园</li></a>
                                            &nbsp;&nbsp;<a href="#"><li>凤凰沟</li></a>
                                        </div>
                                    </div>

                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/05.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">婺源风景区</a><br>
                                            <a href="#" style="margin-left:0px;opacity: 0.7;font-size: 12px;">中国绝美乡村，开始你的文艺之旅</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/明月山.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">明月山</a><br>
                                            <a href="#" style="margin-left:0px;opacity: 0.7;font-size: 12px;">人间四月芳菲尽，山清杜鹃始盛开</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/龙虎山.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">龙虎山</a><br>
                                            <a href="#" style="margin-left:0px;opacity: 0.7;font-size: 12px;">神秘古越族文明,绝美的自然风光</a>
                                    </div>

                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">
                                            <img src="img/九江.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">九江民生大千世界</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 20px;">自旅行的绝佳选择</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/滕王阁.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">滕王阁</a><br>
                                            <a href="#" style="margin-left:0px;opacity: 0.7;font-size: 12px;">落霞与孤鹜齐飞，秋水共长天一色</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/庐山.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 22px;">庐山</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 20px;">匡庐奇秀甲天下</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/古窑.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">古窑民俗博览区</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 20px;">水土宜陶</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/温泉.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">天沐温泉</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 20px;">自然与人文的景观为一体</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/鄱阳湖.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">鄱阳湖国家湿地公园</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 20px;">初见惊艳，再见依然</a>
                                    </div>
                                    <div class="fengjingjieshao" style="float:left; width: 180px; height: 215px;margin-left:15px;margin-top:10px;border: 1px solid gainsboro;">

                                            <img src="img/凤凰沟.jpg" style="width: 180px; height: 170px;"/>
                                            <a href="#" style="font-weight: bold;margin-left: 12px;">凤凰沟</a><br>
                                            <a href="#" style="opacity: 0.7;font-size: 12px;margin-left: 5px;">有光有水，风光秀美</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="disancen" style="text-align: center;height: 130px;">
                        <hr style="border:darkgrey 1px solid;height:0px; background-color:darkgrey; width:1000px;opacity: 0.6;margin-top: 50px;">
                        <div id="dicen" style="text-align: center;margin-top: 40px;">
                            <div id="zuihoujianjie" style="opacity: 0.6;">
                                <a href="#">Copyright ©1999-2021,</a>
                                <a href="#"> huayang.com.</a>
                                <a href="#">All rights reserved. |</a>
                                <a href="#"> ICP证：沪B2-20050130 |</a>
                                <a href="#">沪ICP备08023580号营业执照信息</a>
                            </div>

                            <br>
                            <div id="jianjie2" style="opacity: 0.6;">
                                <a href="#">违法和不良信息举报电话021-22500846丨书</a>
                                <a href="#">全国旅游投诉热线12301丨</a>
                                <a href="#">上海市旅游网站落实诚信建设主体责任承诺</a>
                            </div>
                        </div>
                    </div>






        </table>

<script>
    var last=null;
    function showtime(){
        var time=new Date();
        bd=time.toLocaleString();
        shijian1=document.getElementById("shijian");
        shijian1.innerHTML=bd;
    }
    window.setInterval("showtime()",1000);
    window.onload=function () {
        //     var a=document.getElementById("diyilie").getElementsByTagName("a");
        //     for(var i=0;i<a.length;i++) {
        //
        //         a[i].style.backgroundColor = "blue";
        //     }
        //
        // }
        var yilie01 = document.getElementById("yilie01");

        var yilie02=document.getElementById("yilie02");
        var yilie03=document.getElementById("yilie03");
        var yilie04=document.getElementById("yilie04");
        var yilie05=document.getElementById("yilie05");
        var yilie06=document.getElementById("yilie06");
        var yilie07=document.getElementById("yilie07");
        yilie01.onclick = function () {
            yilie01.style.backgroundColor= "white";
            yilie02.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";

        }
        yilie02.onclick=function () {
            yilie02.style.background="white";
            yilie01.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";
            yilie01.style.hover.backgroundColor="white";

        }
        yilie03.onclick=function () {
            yilie03.style.background="white";
            yilie01.style.backgroundColor= "#00d0d4";
            yilie02.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";

        }
        yilie04.onclick=function () {
            yilie04.style.background="white";
            yilie01.style.backgroundColor= "#00d0d4";
            yilie02.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";

        }
        yilie05.onclick=function () {
            yilie05.style.background="white";
            yilie01.style.backgroundColor= "#00d0d4";
            yilie02.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";

        }
        yilie06.onclick=function () {
            yilie06.style.background="white";
            yilie01.style.backgroundColor= "#00d0d4";
            yilie02.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie07.style.backgroundColor="#00d0d4";

        }
        yilie07.onclick=function () {
            yilie07.style.background="white";
            yilie01.style.backgroundColor="#00d0d4";
            yilie02.style.backgroundColor="#00d0d4";
            yilie03.style.backgroundColor="#00d0d4";
            yilie04.style.backgroundColor="#00d0d4";
            yilie05.style.backgroundColor="#00d0d4";
            yilie06.style.backgroundColor="#00d0d4";


        }
    }

    var items=document.getElementsByClassName('item');
    var points=document.getElementsByClassName('point');
    var goPreBtn=document.getElementById('goPre');
    var goNextBtn=document.getElementById('goNext');
    var  index=0;
    var time=0;

    var clearActive=function () {
        for(var i=0;i<items.length;i++){
            items[i].className='item';

        }
        for(var i=0;i<points.length;i++) {
            points[i].className='point';
        }
    }
    var goIndex=function(){
        clearActive();
        console.log()
        points[index].className='point active';
        items[index].className='item active';

    }
    var goNext=function () {
        if(index<4){
            index++
        }
        else{
            index=0;
        }
        goIndex();
    }
    var goPre=function(){
        if(index==0){
            index=4;
        }else{
            index--;
        }
        goIndex();
    }
    goNextBtn.addEventListener('click',function () {
        goNext();
        time=0;
    })
    goPreBtn.addEventListener('click',function(){
        goPre();
        time=0;
    })
    for(var i=0;i<points.length;i++){
        points[i].addEventListener('click',function () {

            var pointIndex=this.getAttribute('data-index');
            index=pointIndex;
            goIndex();
            time=0;
        })
    }

    setInterval(function() {
        time++;
        if(time==20){
            goNext();
            time=0;
        }
    },100)


</script>


</body>
</html>
